import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    id: root
    title: "颜色组对比"
    
    SystemPalette {
        id: activePalette
        colorGroup: SystemPalette.Active
    }
    
    SystemPalette {
        id: inactivePalette
        colorGroup: SystemPalette.Inactive
    }
    
    SystemPalette {
        id: disabledPalette
        colorGroup: SystemPalette.Disabled
    }
    
    ScrollView {
        id: scrollView
        anchors.fill: parent
        contentWidth: availableWidth
        
        ColumnLayout {
            anchors.horizontalCenter: parent.horizontalCenter
            width: Math.min(parent.width - 40, 400)
            spacing: 20
            
            Item { height: 10 }
            
            Label {
                text: "颜色组对比展示"
                font.pixelSize: 18
                font.bold: true
                Layout.fillWidth: true
                horizontalAlignment: Text.AlignHCenter
            }
            
            // 颜色组说明
            Rectangle {
                Layout.fillWidth: true
                height: 80
                color: activePalette.window
                border.width: 1
                border.color: activePalette.mid
                
                ColumnLayout {
                    anchors.centerIn: parent
                    spacing: 5
                    
                    Text {
                        text: "SystemPalette提供三种颜色组："
                        font.pixelSize: 14
                        Layout.alignment: Qt.AlignHCenter
                    }
                    
                    Text {
                        text: "Active (激活状态) - Inactive (非激活状态) - Disabled (禁用状态)"
                        font.pixelSize: 12
                        Layout.alignment: Qt.AlignHCenter
                        color: activePalette.text
                    }
                }
            }
            
            // 颜色组对比表格
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 280
                color: activePalette.base
                border.width: 1
                border.color: activePalette.mid
                
                ColumnLayout {
                    anchors.fill: parent
                    anchors.margins: 10
                    spacing: 10
                    
                    // 表头
                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 10
                        
                        Item { Layout.preferredWidth: 100 }
                        
                        Repeater {
                            model: ["Active", "Inactive", "Disabled"]
                            
                            Text {
                                text: modelData
                                font.bold: true
                                Layout.fillWidth: true
                                horizontalAlignment: Text.AlignHCenter
                            }
                        }
                    }
                    
                    // 窗口颜色行
                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 10
                        
                        Text {
                            text: "窗口"
                            Layout.preferredWidth: 100
                        }
                        
                        Repeater {
                            model: [activePalette, inactivePalette, disabledPalette]
                            
                            Rectangle {
                                Layout.fillWidth: true
                                height: 50
                                color: modelData.window
                                border.width: 1
                                border.color: modelData.mid
                                
                                Text {
                                    anchors.centerIn: parent
                                    text: "#" + modelData.window.toString().substring(1)
                                    color: modelData.windowText
                                    font.family: "Courier"
                                }
                            }
                        }
                    }
                    
                    // 按钮颜色行
                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 10
                        
                        Text {
                            text: "按钮"
                            Layout.preferredWidth: 100
                        }
                        
                        Repeater {
                            model: [activePalette, inactivePalette, disabledPalette]
                            
                            Rectangle {
                                Layout.fillWidth: true
                                height: 50
                                color: modelData.button
                                border.width: 1
                                border.color: modelData.mid
                                
                                Text {
                                    anchors.centerIn: parent
                                    text: "#" + modelData.button.toString().substring(1)
                                    color: modelData.buttonText
                                    font.family: "Courier"
                                }
                            }
                        }
                    }
                    
                    // 高亮颜色行
                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 10
                        
                        Text {
                            text: "高亮"
                            Layout.preferredWidth: 100
                        }
                        
                        Repeater {
                            model: [activePalette, inactivePalette, disabledPalette]
                            
                            Rectangle {
                                Layout.fillWidth: true
                                height: 50
                                color: modelData.highlight
                                border.width: 1
                                border.color: modelData.mid
                                
                                Text {
                                    anchors.centerIn: parent
                                    text: "#" + modelData.highlight.toString().substring(1)
                                    color: modelData.highlightedText
                                    font.family: "Courier"
                                }
                            }
                        }
                    }
                }
            }
            
            // 实际应用示例
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 200
                color: activePalette.window
                border.width: 1
                border.color: activePalette.mid
                
                ColumnLayout {
                    anchors.fill: parent
                    anchors.margins: 10
                    spacing: 20
                    
                    Text {
                        text: "按钮状态示例"
                        font.pixelSize: 14
                        font.bold: true
                        Layout.alignment: Qt.AlignHCenter
                    }
                    
                    RowLayout {
                        Layout.alignment: Qt.AlignHCenter
                        spacing: 40
                        
                        // 激活按钮
                        Button {
                            text: "激活按钮"
                            enabled: true
                            
                            background: Rectangle {
                                implicitWidth: 120
                                implicitHeight: 40
                                color: parent.down ? activePalette.dark :
                                       parent.hovered ? activePalette.highlight :
                                       activePalette.button
                                border.width: 1
                                border.color: activePalette.mid
                            }
                        }
                        
                        // 非激活按钮
                        Button {
                            text: "非激活按钮"
                            enabled: true
                            
                            background: Rectangle {
                                implicitWidth: 120
                                implicitHeight: 40
                                color: inactivePalette.button
                                border.width: 1
                                border.color: inactivePalette.mid
                            }
                        }
                        
                        // 禁用按钮
                        Button {
                            text: "禁用按钮"
                            enabled: false
                            
                            background: Rectangle {
                                implicitWidth: 120
                                implicitHeight: 40
                                color: disabledPalette.button
                                border.width: 1
                                border.color: disabledPalette.mid
                            }
                        }
                    }
                }
            }
            
            Item { height: 20 }
        }
    }
} 
